<template>
    <v-chart class='chart' :option='option' />
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { LineChart } from 'echarts/charts';

import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';

use([
    CanvasRenderer,
    BarChart,
    LineChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
]);

provide(THEME_KEY, 'dark');

const option = ref({
    dataset: [
        {
            dimensions: ['YF', 'BYSR', 'SNTY', 'BYZJE', 'BYZJL', 'LJSR', 'SNTQ', 'LJZJE', 'LJZJL'],
            source: [
                [1, 416.94, 414.78, 2.16, 0.52, 416.94, 414.78, 2.16, 0.52],
                [2, 485.39, 513.25, -27.86, -5.43, 902.34, 928.02, -25.68, -2.77],
                [3, 368.17, 366, 2.17, 0.59, 1270.5, 1294.02, -23.52, -1.82],
                [4, 360.51, 382.91, -22.4, -5.85, 1631.01, 1676.93, -45.92, -2.74],
                [5, 0, 289.35, -289.35, -100, 1631.01, 1966.28, -335.27, -17.05],
                [6, 0, 407.57, -407.57, -100, 1631.01, 2373.86, -742.85, -31.29],
                [7, 0, 316.46, -316.46, -100, 1631.01, 2690.32, -1059.31, -39.37],
                [8, 0, 235.3, -235.3, -100, 1631.01, 2925.61, -1294.6, -44.25],
                [9, 0, 362.43, -362.43, -100, 1631.01, 3288.04, -1657.03, -50.4],
                [10, 0, 381.68, -381.68, -100, 1631.01, 3669.72, -2038.71, -55.55],
                [11, 0, 262.8, -262.8, -100, 1631.01, 3932.52, -2301.51, -58.53],
                [12, 0, 439.01, -439.01, -100, 1631.01, 4371.53, -2740.52, -62.69]
            ]
        },
        {
            transform: {
                type: 'sort',
                config: { dimension: 'YF', order: 'asc' }
            }
        }
    ],

    xAxis: { name: '月份', type: 'category' },
    yAxis: {},
    series:
    {
        type: 'bar',
        encode: { x: 'YF', y: 'LJSR' },
    }
});
</script>

<style scoped>
.chart {
    height: 400px;
}
</style>